import React, { useEffect, useState } from 'react'
import type { RadioChangeEvent } from 'antd';
import { Tabs, Space, Radio, Button, DatePicker, Form, Row, Input, Select, TimePicker } from 'antd';
import { SearchData } from '@/interface/orderInterface';
import { getSearch } from '@/apis/order'
import { useSelector, useDispatch } from "umi"
const RangePicker: any = DatePicker.RangePicker;
const Option: any = Select.Option
// const {RangePicker}=DatePicker;


type Props = {}


const OrderSearch: React.FC = (props: Props) => {

    const [searchDate, setSearchDate] = useState<SearchData>({})
    const [order_type, setOderType] = useState(-1)
    const [status, setStatus] = useState(0)
    const [pay_type, setPayType] = useState(0)
    const [form] = Form.useForm();
    const orderState = useSelector((state: {order:any }) => {
        //state整个仓库i数据，product是仓库命名空间
        return state.order
    })
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch({
            type: "order/query"
        })
    }, [])

    const forceDate = async (value: any) => {
        let a = { status: 1 }
        const res = await getSearch(value)
        // console.log("resres", res.data.data);
    }

    useEffect(() => {
        dispatch({
            type: "order/query",
            payload: searchDate
        })
    }, [status, pay_type, order_type])

    const changeState = (e: RadioChangeEvent) => {
        setStatus(e.target.value)
        if (e.target.value != "0") {
            setSearchDate({ ...searchDate, status: Number(e.target.value) })
        } else {
            setSearchDate({ ...searchDate, status: undefined })
        }

    };
    const changePay = (e: RadioChangeEvent) => {
        setPayType(e.target.value)
        if (e.target.value != "0") {
            setSearchDate({ ...searchDate, pay_type: Number(e.target.value) })
        } else {
            setSearchDate({ ...searchDate, pay_type: undefined })
        }
    };

    const onChangeTab = (key: string) => {
        setOderType(Number(key))
        console.log(key);

        if (key != "-1") {
            setSearchDate({ ...searchDate, order_type: Number(key) })
        } else {
            setSearchDate({ ...searchDate, order_type: undefined })
        }
    };

    const menus = [
        {
            label: `全部订单`,
            key: '-1',
        },
        {
            label: `普通订单`,
            key: '0',
        },
        {
            label: `拼团订单`,
            key: '1',
        },
        {
            label: `秒杀订单`,
            key: '2',
        },
        {
            label: `砍价订单`,
            key: '3',
        },
        {
            label: `预售订单`,
            key: '4',
        },
    ]
    const onFinish = (values: {dateLimit:[],search:{type:any,value:any}}) => {
        console.log('Received values of form: ', values.search);
        if(values.search && values.search.type!='all'){
            const obj=values.search.type
            const value=values.search.value
            let a=Object()
            a[obj]=value;
            dispatch({
                type: "order/query",
                payload: {
                    'dateLimit':values.dateLimit,
                    ...a
                }
            })
        }
        // console.log(values.dateLimit[0].value);

    };
    const changeDate=(value:any,dateString:any)=>{
        console.log("dateString",dateString);
       if(dateString[0]!=''){
        dispatch({
            type: "order/query",
            payload: {
                'dateLimit':dateString
            }
        })
       }
        
    }



    return (
        <>

            <Tabs
                onChange={onChangeTab}
                items={menus}
            ></Tabs>

            <Space  style={{ marginBottom: '10px' }}>
                状态:
                {/* 1:未支付、2:未发货、3:待收货、4:待评价、5:交易完成、6:待核销、7:已核销、-1:仅退款、-2:退货退款、-3:拒绝退款、-4:商品待退货、-5:退货待收货、-6:已退款、-7:已删除 */}
                <Radio.Group onChange={changeState}>
                    <Radio.Button value="0" >全部</Radio.Button>
                    <Radio.Button value="1">未支付</Radio.Button>
                    <Radio.Button value="2">未发货</Radio.Button>
                    <Radio.Button value="3">待发货</Radio.Button>
                    <Radio.Button value="4">待评价</Radio.Button>
                    <Radio.Button value="5">交易完成</Radio.Button>
                    <Radio.Button value="6">待核销</Radio.Button>
                    <Radio.Button value="1">未支付</Radio.Button>
                    <Radio.Button value="-1">仅退款</Radio.Button>
                    <Radio.Button value="-2">退货退款</Radio.Button>
                    <Radio.Button value="-3">拒绝退款</Radio.Button>
                    <Radio.Button value="-4">商品待退货</Radio.Button>
                    <Radio.Button value="-5">退货待收货</Radio.Button>
                    <Radio.Button value="-6">已退款</Radio.Button>
                    <Radio.Button value="-7">已删除</Radio.Button>
                </Radio.Group>
            </Space>

            <Space  style={{ marginBottom: '10px' }}>
                方式:
                <Radio.Group onChange={changePay}>
                    <Radio.Button value="0">全部</Radio.Button>
                    <Radio.Button value="1">微信支付</Radio.Button>
                    <Radio.Button value="2">支付宝支付</Radio.Button>
                    <Radio.Button value="3">余额支付</Radio.Button>
                    <Radio.Button value="4">线下支付</Radio.Button>
                </Radio.Group>
            </Space>
            <Form
                form={form}
                name="advanced_search"
                className="ant-advanced-search-form"
                onFinish={onFinish}

            >
                <Row gutter={24} style={{ margin: '0px 0px', width: '60vw', display: 'flex', justifyContent: 'space-between' }}>
                    <Form.Item name="dateLimit" label="时间" >
                        <RangePicker onChange={changeDate}/>
                    </Form.Item>

                    <Form.Item name="search" label="搜索" >
                        <Input.Group compact>
                            <Form.Item
                                name={['search', 'type']}
                                // noStyle
                                rules={[{ message: 'Province is required' }]}
                            >
                                <Select placeholder="搜索" style={{width:'100px'}}>
                                    <Option value="all">全部</Option>
                                    <Option value="_id">订单号</Option>
                                    <Option value="user_id">UID</Option>
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name={['search', 'value']}
                                noStyle
                                rules={[{ message: 'Street is required' }]}
                            >
                                <Input style={{ width: '200px' }} placeholder="请输入" />
                            </Form.Item>
                        </Input.Group>
                    </Form.Item>
                    <Form.Item >
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                    </Form.Item>
                </Row>
            </Form>

        </>
    )
}

export default OrderSearch